<template>
    <div class="icons">
        <swiper class="icons-swiper" :options="swiperOption">
            <swiper-slide  v-for="(page,index) of pages" :key="index">
                <div class='icon' v-for="item of iconList" :key='item.id'>
                    <div class="icon-image">
                        <img class='icon-image-content' :src="item.imgUrl" alt="">  
                    </div>
                    <p class="icon-desc">{{item.desc}}</p>
                </div>
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>  
    </div>
</template>
<script>
export default {
    name: 'homeIcons',
    props:{
        iconList:Array,
        
    },
    data() {
        return {
            swiperOption:{
                autoplay:false,
               
            }
        }   
    } ,
    computed: {
            pages() {
                const pages=[]
                this.iconList.forEach((element,index) => {
                    const page=Math.floor(index/8)
                    if(!pages[page]){
                        pages[page]=[]
                    }
                    pages[page].push(element)
                    
                }); 
                return pages
            }
        }
}
</script>
<style lang="stylus" scoped>
   @import '~styles/mixmins.styl'
     
    .icons >>> .icons-swiper
        height:0
        padding-bottom :50%
    .icons
        margin-top: .1rem
        .icon
            width :25%
            padding-bottom:25%
            float: left
            height:0
            overflow: hidden
            position: relative
            .icon-image
                position:absolute
                top:0
                left:0
                right:0
                bottom:.44rem
                box-sizing:border-box
                padding 0.1rem
                .icon-image-content
                    height :100%
                    text-align :center
                    margin:0 auto
                    display :block
            .icon-desc
                position:absolute
                left:0
                right:0
                bottom :0
                height :.44rem
                line-height :.44rem
                color:#333333
                text-align :center
                etc();
            

</style>